<template>
  <div class="container" ref="containerRef"></div>
</template>
<script setup>
import { Graph, NodeEvent } from '@antv/g6'
import TraceNode from './TraceNode.vue'

import { getIcon } from '@/libs/iconfont/utils'

const props = defineProps({
  data: Object,
})

const containerRef = ref(null)
let graph

onMounted(() => {
  //   initGraph(props.data)
})

function isLeafNode(d) {
  return !d.children || d.children.length === 0
}

async function initGraph() {
  if (graph) {
    graph.destroy()
    graph = null
  }

  const res = props.data

  const nodes = []
  const edges = []

  for (const key in res.topologyid) {
    const item = res.topologyid[key]
    const node = {
      id: key,
      style: {
        labelText: item.comm,
        // iconText: getIcon('network'),
      },
      data: item,
    }

    // if (item.trace) {
    //   node.style.fill = '#EF4444'
    //   node.style.stroke = 'red'
    // }

    // const dom = document.createDocumentFragment()
    // const vm = createApp(TraceNode, {
    //   data: item,
    //   pid: key,
    // }).mount(dom)

    // node.type = 'html'
    // node.style.size = [180, 50]
    // node.style.innerHTML = vm.$el

    nodes.push(node)
  }

  console.log('nodes', nodes)

  res.related.forEach((item, index) => {
    edges.push({
      id: `edge-${index}`,
      // type: 'cubic-vertical',

      source: item.start.toString(),
      target: item.end.toString(),

      style: {
        stroke: '#3056E3',
        endArrow: true,

        // label: true,
        // labelText: services[item.secureType],
        // labelOffsetY: 15,
      },
    })
  })

  graph = new Graph({
    container: containerRef.value,
    width: containerRef.value.scrollWidth,
    height: containerRef.value.scrollHeight,
    // autoFit: 'view',
    // autoFit: 'view',
    autoFit: 'center',
    zoomRange: [0.1, 2],
    data: {
      nodes,
      edges,
    },

    node: {
      style: {
        // labelText: d => d.id,
        // labelPlacement: 'right',
        // labelBackground: true,
        // ports: [{ placement: 'right' }, { placement: 'left' }],
      },
      // animation: {
      //   enter: false,
      // },
    },
    edge: {
      type: 'cubic-horizontal',
    },
    layout: {
      // type: 'dagre',
      // rankdir: 'LR',
      // getWidth: () => 500, // 增加宽度
      // getHeight: () => 200, // 增加高度
      // getHGap: () => 400, // 增加水平间距
      // getVGap: () => 60, // 增加垂直间距

      type: 'antv-dagre',
      rankdir: 'LR',
      nodesep: 25, // 节点间距
      nodeSize: 100,
      ranksep: 100, // 线长度
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    plugins: [
      {
        type: 'tooltip',
        getContent: (e, items) => {
          const jsons = []

          items.forEach(item => {
            jsons.push(JSON.stringify(item.data))
          })

          return `<div>${jsons.join('\n')}</div>`
        },
      },
    ],
  })

  graph.on(NodeEvent.CLICK, ev => {
    const { target } = ev

    detail.show = true
    detail.data = res.topologyid[target.id]

    console.log('target', target)
  })

  graph.render()
}

watch(
  () => props.data,
  () => {
    console.log('YpTopo', props.data)
    if (props.data) initGraph(props.data)
  },
  {
    deep: true,
    immediate: true,
  },
)
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 500px;
}
</style>
